<template>
	<view class="evaluate-box">
		 <view class="table-head">
		 	 <text class="th-col">奖项</text>
		 	 <text class="th-col">荣誉状态</text>
		 	 <text class="th-col">分数</text>
		 	 <text class="th-col">操作</text>
		 </view>
		<view class="table-td" v-for="(item,index) in EvaluationList">
			 <view class="honor-name"> <text class="icon-good"></text>  {{item.honorName}}</view>
			 <view class="honor-name">
				 
				 <text :class="{'icon-ok':item.isobtain==1,'icon-no':item.isobtain==0}" space="ensp"></text>
					{{item.isobtain == 1?'已获得':'未获得'}}
				 </view>
			 <view>{{item.honorScore}}</view>
			 <view class="button-group">
				 <button class="btn-cancel" @click="deleteClassHonor(item,'no')">取消荣誉</button>
				 <button class="btn-ok" @click="acquireClassHonor(item,'ok')">获取荣誉</button>
			 </view>
		</view>	 
		<PopWindow  :visible.sync="isVisible"  width="190.63rpx" height="93.44rpx">
		 <template v-slot:content>
			<view class="inner-content">
				{{content}}
			</view> 
			<view class="">
				<button class="button-footer-ok" @click="confirmFun">确认</button>
			</view>
		 </template>
		</PopWindow>

	</view>
</template>

<script>
	import { fetchData } from '../../utils/request'
	import  {mapState} from 'vuex'
	export default {
		name:'EvaluatePage',
		data() {
			return {
				EvaluationList:[],
				isVisible:false,
				tipTitle:'确认操作',
				content:'',
				operateKind:''
			};
		},
		computed:{
			...mapState(['classId','baseImgURL','schoolId'])
		},
		methods:{
			async getAllEvaluation(){
				let res = await fetchData({
				        url:`/database/classInfo/api/selecthonolList?classId=${this.classId}&schoolId=${this.schoolId}`,
				        method:'POST'
				 })
				 if(res.code==200){
					  this.EvaluationList = res.rows
					}
				},
			async confirmFun(){
				let purl= '';
				if(this.operateKind=='no') {
					purl = '/database/classInfo/api/deleteClassHonor';
				}
				if(this.operateKind=='ok') {
					purl = '/database/classInfo/api/insertClasshonor';
				}
				let res = await fetchData({
				        url:purl,
				        method:'POST',
						data:{
							honorId:this.operateId
						}
				 })
				 if(res.code==200){
					 uni.$u.toast(res.msg);
					 this.isVisible = false;
					 this.getAllEvaluation();
				 }
				 
			},
			async deleteClassHonor(item){
				this.isVisible = true;
				this.content = '确认要取消荣誉吗！'
				this.operateId = item.id;
				this.operateKind = 'no'
		
				
			},
			async acquireClassHonor(item){
				this.isVisible = true;
				this.content = '确认要获得荣誉吗！'
				this.operateId = item.id;
				this.operateKind = 'ok'
		
				
			}
				
			
		},
		mounted(){
			this.getAllEvaluation();
		}
	}
</script>

<style lang="scss" scoped>
	.evaluate-box {
		width: 100%;
		height: 362.47upx;
		padding: 7.81upx;
		background: rgba(217,217,217,0.26);
		border-radius: 4.69upx;
		box-sizing: border-box;
	}
.table-head,.table-td {
	height:30.47upx;
	width: 100%;
	line-height:30.47upx;
	background: url($imageurl+'/introduce/nov-table.png') center top no-repeat;
	background-size:100%;
	font-size: 10.16upx;
	color: #3D70FF;
	display: flex;
	justify-content: space-between;
	text.th-col {
		flex:1;
		text-align: center;
		
	}
}

.table-td {
	background: none;
	font-size:8.59upx;
	color: #333;
	height:42.97upx;
	line-height:42.97upx;
	&:nth-child(2n) {
	  background:rgba(53,136,255,0.05);
	}
	>view {
		flex:1;
		text-align: center;
		
	}
	.honor-name {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.icon-good {
		width:24.61upx;
		height:24.61upx;
		background: url($imageurl+'/introduce/icon_good.png') center top no-repeat;
		background-size:100%;
		margin-right: 3.91upx;
	}
	.icon-ok,.icon-no {
		width:10.61upx;
		height:10.61upx;
		background: url($imageurl+'/introduce/icon_ok.png') center top no-repeat;
		background-size:100%;
		margin-right: 3.91upx;
		
	}
	.icon-no {
		background: url($imageurl+'/introduce/icon_no.png') center top no-repeat;
		background-size:100%;
	}
	
}

.button-group {
	display: flex;
	padding-top: 11.72upx;
	.btn-cancel , .btn-ok {
		width: 70.31upx;
		height: 21.48upx;
		border-radius: 3.91upx;
		background: linear-gradient( 95deg, #B2C4FF 0%, #8CD4F8 100%, #E6F7FF 100%);
		font-size: 8.59upx;
		color: #FFFFFF;
		line-height: 21.48upx;
		text-shadow: 0px 2px 5px rgba(81,124,240,0.35);
	}
	.btn-ok {
		background: linear-gradient( 95deg, #486FEE 0%, #8CD4F8 100%);
	}
}

.inner-content {
	font-size: 9.72upx;
	text-align: center;
	padding-top: 19.53upx;
}

</style>
